<template>
  <div class="left">
    <el-row :gutter="25">
      <el-col :span="10">

      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="findmebycarnumber()" >查询个人信息</el-button>

      </el-col>
      <el-button type="primary" @click="showEditDialog()" >更改信息</el-button>

      <el-table :visible.sync="editDialogVisible" :data="userme"  style="hight: 200px"
                border stripe>
        <el-table-column type="index" ></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="角色" prop="role"></el-table-column>
        <el-table-column label="车牌号" prop="carnumber"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary"  size="mini" @click="yd()">VIP缴费</el-button>

<!--            &lt;!&ndash; 删除 &ndash;&gt;yd()变成改为VIP-->


          </template>
        </el-table-column>
      </el-table>
<!--      <form action="/pay" method="post">-->
<!--        订单号：<input type="text" name="WIDout_trade_no" required><br/>-->
<!--        订单名称：<input type="text" name="WIDsubject" required><br/>-->
<!--        付款金额：<input type="text" name="WIDtotal_amount" required><br/>-->
<!--        WIDbody：<input type="text" name="WIDbody"><br/>-->
<!--        <input type="submit" value="下单"> <input type="reset" value="重置">-->
<!--&lt;!&ndash;      </form>&ndash;&gt;http://localhost:8081/#/meqian?carnumber=555-->


    </el-row>
<!--    <h1>支付宝沙箱支付</h1>-->
<!--    <form action="create" method="post">-->
<!--      订单编号： <input type="text" name="id"> <br>-->
<!--      订单金额：<input type="text" name="price"> <br>-->
<!--      订单标题：<input type="text" name="title"> <br>-->
<!--      <input type="submit" value="创建订单">-->
<!--    </form>-->

    <el-dialog title="下单信息" :visible.sync="editDialogVisible3" width="50%" @colse="editDialogClosed">
      <el-form :model="editFormmoney" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="订单编号" prop="id" >
          <el-input v-model="editForm.id" ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="订单金额" prop="price">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <!-- 邮箱 -->

        <el-form-item label="订单标题" prop="title">
          <el-input v-model="editForm.title" ></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="zfb">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 修改用户对话框 -->
    <el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @colse="editDialogClosed">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="editForm.username" ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
        <!-- 邮箱 -->

        <el-form-item label="车牌号" prop="carnumber">
          <el-input v-model="editForm.carnumber" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- jiaofei话框 -->
    <el-dialog title="缴费信息" :visible.sync="editDialogVisible2" width="50%" @colse="editDialogClosed2">
      <el-form :model="editForm2" :rules="editFormRules2" ref="editFormRef2" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="editForm2.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="车牌号" prop="carnumber">
          <el-input v-model="editForm2.carnumber" disabled ></el-input>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    created (){
      this.getUserList();
      this.getmeanList();
      //this.activePath = window.sessionStorage.getItem('activePath')
    },
    data(){


      return{
        //查询信息实体
        queryInfo:{
          query:"",//查询信息
          pageNum: 1,//当前页
          pageSize: 5,//每页最大数
        },
        cz:this.$route.query.username,
        user:[],
        userme:[],
        carlist:[],
        meanlistqian:[],
        userlist:[],//用户列表
        total:0,//总记录数
        // 控制修改用户对话框显示/隐藏
        editDialogVisible:false,
        editDialogVisible3:false,
        editDialogVisible2:false,
        addDialogVisible: false,
        // 被激活的连接
        activePath: '/userqian',
        // 添加用户表单项
        addForm: {
          username:'',
          password:'',

          carnumber:'',
        },
        editFormmoney:{},

        // 修改用户信息
        editForm:{},
        // 修改用户信息
        editForm2:{},
        // 验证规则
        addFormRules:{
          // 添加用户表单验证规则
          username:[
            { required: true, message: "请输入用户名", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
          ],
          password:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
        // 修改用户表单验证规则
        editFormRules:{
          password:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
        // 修改用户表单验证规则
        editFormRules2:{
          password:[
            { required: true, message: "请输入缴费金额", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
      }

    },
    methods:{
      async getUserList() {

        const { data: res } = await this.$http.get("txtqian");
        this.userlist = res.data;
        this.user=res.user;

      },

      async getmeanList(){
        const { data: res } = await this.$http.get("meanqian");
        this.meanlistqian = res.data;
      },

      async getFindCarList() {
        // 调用post请求
        const { data: res } = await this.$http.get("txtfindcarkong");
        this.carlist = res.data; // 将返回数据赋值
        // this.total = res.numbers; // 总个数
        // console.log(queryInfo);



      },

      async findmebycarnumber(){

        const { data: res } = await this.$http.post(
          `findmebycarnumber?carnumber=${this.$route.query.carnumber}`
        );

        this.userme = res.data;


      },
      async yd(){
        // this.editDialogVisible2 = true;
        const confirmResult = await this.$confirm('将要支付100元, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        const { data: res1 } = await this.$http.post(`getuserbycarnumber?carnumber=${this.$route.query.carnumber}`);
        this.$message.success(res1);
        if (res1 != "success") {

          return this.$message.error("你已经是VIP了");
        }
        else{

          const { data: res } = await this.$http.post(
            `updaterole?carnumber=${this.$route.query.carnumber}`
          );
          this.$message.success("缴费成功");
          // this.$message.success(res.data);
          this.user = res.data;
          this.findme2();


        }





      },
      savePath (activePath) {
        window.sessionStorage.setItem('activePath', activePath)
        this.activePath = activePath
      },
      // 展示修改框
      async showEditDialog(){


        // if (res != "success") {
        // userinfo.state = !userinfo.state;
        // return this.$message.error("操作失败！！！");
        // }
        // this.$message.success("操作成功！！！");


        this.editDialogVisible = true;//编辑菜单开启
      },
      // 关闭窗口,重置信息
      editDialogClosed(){
        this.$refs.editFormRef.resetFields();
      },
      editDialogClosed2(){
        this.$refs.editFormRef2.resetFields();
      },
      // 确认修改
      editUserInfo(){
        this.$refs.editFormRef.validate(async valid =>{//表单验证
          console.log(valid);
          if( !valid ) return;
          // 发起请求
          this.$message.success(this.editForm);
          const {data:res} = await this.$http.put("editUserqian",this.editForm);


          console.log(res);
          if (res != "success") return this.$message.error("操作失败！！！");
          this.$message.success("操作成功！！！");
          //隐藏
          this.editDialogVisible = false;
          this.getUserList();
        });
      },
      // zfb确认修改
      zfb(){
        this.$router.push({ path: "/zf"});
      //   axios.post(
      //     "http://localhost:8080/order/alipay?outTradeNo=" +
      //     this.ruleForm.order_number +
      //     "&subject=" +
      //     this.ruleForm.order_detail +
      //     "&totalAmount=" +
      //     this.ruleForm.order_price +
      //     "&body=" +
      //     this.ruleForm.goods_info
      //   )
      //     .then((resp) => {
      //       // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
      //       const divForm = document.getElementsByTagName("div");
      //       if (divForm.length) {
      //         document.body.removeChild(divForm[0]);
      //       }
      //       const div = document.createElement("div");
      //       div.innerHTML = resp.data; // data就是接口返回的form 表单字符串
      //       document.body.appendChild(div);
      //       document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
      //       document.forms[0].submit();
      //     });
      // }

      },
      // 确认jiaofei修改
      editUserInfo2(){
        this.$refs.editFormRef2.validate(async valid =>{//表单验证
          console.log(valid);
          if( !valid ) return;
          // 发起请求
          const {data:res} = await this.$http.put("jiaofeimoney",this.editForm2);
          console.log(res);
          if (res != "success") return this.$message.error("操作失败！！！");
          this.$message.success("操作成功！！！");
          //隐藏
          this.editDialogVisible = false;
          this.getUserList();
        });
      },
    }

  }
</script>

<style scoped>
  .el-tag{
    font-size: 30px;

  }
  .right{
    background-color: #B3C0D1;
    width: 300px;
    height: 400px;
    position: absolute;
    left: 800px;
    float: left;
    text-align: center;
    font-size: 40px;
    color: blanchedalmond;
    background: url("../assets/11.png") no-repeat;

  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .left{
    background-color: #B3C0D1;
    width: 900px;
    height: 800px;
    position: absolute;
    left: 100px;
  }

  .el-header, .el-footer {
    height: 200px;
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    height: 600px;
  }
  .el-gg{

    background-color: #B3C0D1;

  }


</style>
